<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String bathPath = request.getContextPath();
        pageContext.setAttribute("bathPath", bathPath);
    %>
    <meta charset="UTF-8">
    <title>补勤处理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${bathPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${bathPath}/css/common.css">
    <link rel="stylesheet" href="${bathPath}/css/forgetSign.css">
</head>
<body>
<section class="group-late">
    <div class="layui-form demoTable">
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                    <select type="text" id="depId" name="depId" lay-verify="required" lay-filter="business"
                            autocomplete="off" class="layui-input">
                    </select>
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 20px;">
            <button class="layui-btn layui-btn-normal w92" data-type="reload">查询</button>
            <button class="layui-btn layui-btn-normal" data-type="add">新增</button>
        </div>
    </div>


<%--    <div class="layui-btn-group ml-54 demoTable">--%>
<%--        --%>
<%--    </div>--%>

    <table class="layui-hide" id="forgetSign" lay-filter="test"></table>
<%--    <script type="text/html" id="barDemo">--%>
<%--        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>--%>
<%--        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--%>
<%--    </script>--%>
</section>

<!--添加弹出层-->
<div id="addMask" style="display: none;">
    <form class="layui-form setting-group-time" action="#" id=runForm" lay-filter="example">
        <div class="layui-form-item">
            <input type="hidden" value="" id="userID" name="userID">
            <label class="layui-form-label">添加记录时间</label>
            <div class="layui-input-inline">
                <input type="text" name="checkTime" class="layui-input" id="checkTime" lay-verify="required"
                       placeholder="请选择日期">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="checkType">
                    <option value=""></option>
                    <option value="0">上班签到</option>
                    <option value="1">下班签退</option>
                    <option value="2">外出</option>
                    <option value="3">返回</option>
                    <option value="4">加班签到</option>
                    <option value="5">加班签退</option>
                    <option value="6">内开门</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">机器号</label>
            <div class="layui-input-inline">
                <input type="text" name="verifyCode" lay-verify="required|number" class="layui-input" id="reason"
                       placeholder="">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button lay-submit id="confirm" class="layui-btn layui-btn-normal" lay-filter="formTest">确定</button>
                <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
            </div>
        </div>
    </form>

    <script src="${bathPath}/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="${bathPath}/js/common.js"></script>
    <script>
        var layerIndex = null;
        $(function () {
            initLayUI();
        })

        $(function () {
            initLayUI();
            $.ajax({
                type: "POST",
                async: false,
                data: "",
                url: "${bathPath}/dept/selectDpetName.action",
                success: function (msg) {
                    var html = "";
                    html += "<option value=''>" + '请选择' + "</option>";
                    for (var i = 0; i < msg.length; i++) {
                        html += "<option value='" + msg[i].depID + "'>" + msg[i].depName + "</option>";
                    }
                    $("#depId").html(html);
                }
            });
        })

        function initLayUI() {
            layui.use(['form', 'laydate', 'layer', 'table'], function () {
                var form = layui.form;
                var laydate = layui.laydate;
                var table = layui.table;
                var layer = layui.layer;


                table.render({
                    elem: '#forgetSign'
                    , url: '${bathPath}/userInfo/selectAll.action'
                    , toolbar: true
                    ,height: 'full-38'
                    , title: '用户数据表'
                    , cols: [[
                        {type: 'checkbox'}
                        , {
                            field: 'depName', title: '部门'
                        }
                        , {field: 'userID', title: '编号'}
                        , {field: 'userName', title: '姓名'}
                        // , {toolbar: '#barDemo', title: '操作'}
                    ]]
                    , page: true
                    , response: {
                        statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                    }
                    , id: 'testReload'
                    // , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    //     return {
                    //         "code": res.status, //解析接口状态
                    //         "msg": res.message, //解析提示文本
                    //         "count": res.total, //解析数据长度
                    //         "data": res.rows.item //解析数据列表
                    //     };
                    // }
                });


                //监听工具条
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'add') {
                        //传入add逻辑事件
                        runEvent(data,1);
                    } else if (obj.event === 'edit') {
                        //传入编辑逻辑事件
                        runEvent(data,0);
                    } else if (obj.event === 'cancel') {
                        layer.close(layerIndex);
                    }
                });

                var $ = layui.$, active = {
                    reload: function () {
                        var depId = $('#depId');
                        //执行重载
                        table.reload('testReload', {
                            where: {
                                DepID: depId.val(),
                            }
                            , page: {
                                curr: 1
                            }
                        });
                    },
                    add:function(){
                        $('#confirm').data('confirm',1);
                        //初始化表单值
                        var checkStatus = table.checkStatus('testReload')
                            , data = checkStatus.data;
                        if (data.length === 0) {
                            layer.msg('至少也得选一个吧', {icon: 2});
                            return;
                        }
                        var ids = [];
                        for (var i = 0; i < data.length; i++) {
                            ids.push(data[i].userID);
                        }
                        form.val('example', {
                            'userID':ids.toString(),
                            'verifyCode': '',
                            'checkType': '',
                            'checkTime': ''
                        })
                        layerIndex = layer.open({
                            type: 1
                            , title: '忘签到/签退处理' //不显示标题栏
                            , area: '400px;'
                            , shade: 0.8
                            , id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                            // ,btn: ['确定', '取消']
                            // ,btnAlign: 'c'
                            , moveType: 1 //拖拽模式，0或者1
                            , content: $('#addMask')
                            , success: function (layero, index) {
                                //日期时间选择器
                                laydate.render({
                                    elem: '#checkTime'
                                    , type: 'datetime'
                                    ,trigger: 'click'
                                });
                                form.render();
                            }
                        });
                    }
                };

                $('.demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

                $('.cancel-layer').on('click', function () {
                    layer.closeAll();
                })

                form.on('submit(formTest)', function (data) {
                    // layer.alert(JSON.stringify((data.field), {
                    //     title: '最终提交的信息'
                    // }))

                    var type = $('#confirm').data('confirm');

                    var dataJson = data.field;
                    dataJson.yuanYin = '忘签到/签退处理';
                    if(type === 0){
                        $.ajax({
                            type: 'POST',
                            data: dataJson,
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/checkInOut/update.action',
                            success: function (data) {
                                if (data == 'SUCCESS') {
                                    layer.closeAll();
                                    active.reload();
                                }
                            }
                        })
                    }else if(type === 1){
                        $.ajax({
                            type: 'POST',
                            data: dataJson,
                            contentType:"application/x-www-form-urlencoded",
                            url: '${bathPath}/checkInOut/insert.action',
                            success: function (data) {
                                if (data == 'SUCCESS') {
                                    layer.closeAll();
                                    active.reload();
                                }
                            }
                        })
                    }
                    return false;
                })

                // type 为0   编辑
                //  type 为1 添加
                var runEvent = function (data,type) {
                    $('#confirm').data('confirm',type);
                    //初始化表单值
                    if (type === 0) {
                        form.val('example', {
                            'userID':data.userID,
                            'verifyCode': data.verifyCode,
                            'checkType': data.checkType,
                            'checkTime': data.checkTime
                        })
                    } else if(type === 1) {
                        form.val('example', {
                            'userID':data.userID,
                            'verifyCode': '',
                            'checkType': '',
                            'checkTime': ''
                        })
                    }
                    layerIndex = layer.open({
                        type: 1
                        , title: '忘签到/签退处理' //不显示标题栏
                        , area: '400px;'
                        , shade: 0.8
                        , id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                        // ,btn: ['确定', '取消']
                        // ,btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: $('#addMask')
                        , success: function (layero, index) {
                            //日期时间选择器
                            laydate.render({
                                elem: '#checkTime'
                                , type: 'datetime'
                                ,trigger: 'click'
                            });
                            form.render();
                        }
                    });
                }
            });

        }
    </script>
</body>
</html>